import type { ZhiHuQuestionElements } from '../../../../../../../../types/constants/personalization/zhi_hu_question'
import type { ThemeType } from '../../../../../../../../types/interfaces'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import { ICON_IDS } from '../../../../../../../../lib/icons/types/constants'
import {
  AppStyleCollections,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { OFFICIAL_THEME_VAR } from '../../../../../../../../types/constants/offical'
import { StylesService } from '../../../../../../../../types/constants/styles'
import { AnswerListManager } from '../module/answer_list'
import { ZhiHuQuestionCommonPage } from './common'

export class ZhiHuQuestionQuestionPage {
  elements: ZhiHuQuestionElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.ZHI_HU_QUESTION]
  private static instance: ZhiHuQuestionQuestionPage
  private readonly commonPage: ZhiHuQuestionCommonPage = ZhiHuQuestionCommonPage.getInstance()
  private answerListManager: AnswerListManager | undefined
  private readonly themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private readonly stylesService: StylesService = StylesService.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): ZhiHuQuestionQuestionPage {
    if (!ZhiHuQuestionQuestionPage.instance) {
      ZhiHuQuestionQuestionPage.instance = new ZhiHuQuestionQuestionPage()
    }
    return ZhiHuQuestionQuestionPage.instance
  }

  init(): void {
    this.answerListManager = AnswerListManager.getInstance(this.elements)
  }

  getMessageStyles(_theme: ThemeType): string {
    return `
.Question-main .Question-mainColumn #QuestionAnswers-answers {
  .List div[role="list"] {
    display: flex;
    flex-direction: column;
    gap: 31px; /* 消息间距 */
    margin: 0 auto;
    padding: ${this.commonPage.padding};

    /* 基础消息项样式 */
    .List-item {
      display: flex;
      max-width: 70%; /* 控制宽度 */
      padding: 10px 14px;
      padding-top: 36px;
      border-radius: ${this.themeVarService.tieBar.default.borderRadius} !important;
      font-size: 15px;
      line-height: 1.4;
      position: relative;
      background: var(${this.themeVarService.tieBar.answer.background}) !important;
      box-shadow: var(${this.themeVarService.default.shadow.sm}) !important;
    }
    
    .List-item + .List-item:after {
      border: none !important; /* 去掉消息间隔线 */
    }
    
    /* 左侧消息（他人消息） */
    .List-item:nth-child(even) {
      align-self: flex-start;
    }
    
    /* 右侧消息（自己消息） */
    .List-item:nth-child(odd) {
      align-self: flex-end;
    }
  }
}
`
  }

  getMainStyles(theme: ThemeType): string {
    return `
.QuestionHeader {
  margin-top: var(${OFFICIAL_THEME_VAR[SUPPORTED_PLATFORMS.ZHI_HU_QUESTION].header}) !important;
  
  .QuestionHeader-main #content .RichText-LinkCardContainer a {
    background: var(${this.themeVarService.link.card.background}) !important;
    box-shadow: var(${this.themeVarService.link.card.shadow}) !important;
    background-blend-mode: overlay;
    border: none;
    
    &:hover {
      transform: translateY(-2px);
    }
    
    .LinkCard-title {
      color: var(${this.themeVarService.link.card.text}) !important;
    }
    .LinkCard-desc {
      
    }
  }
}

#AnswerFormPortalContainer {
  margin-top: 0 !important;
}

.Question-main {
  background-color: var(${this.themeVarService.tieBar.default.background}) !important;
  margin: 0 auto !important;
  min-height: unset !important;
  
  .Question-mainColumn {
    .Card {
      line-height: 1.8 !important;
      background-color: transparent !important;
      box-shadow: unset !important;
      color: var(${this.themeVarService.tieBar.default.text}) !important;
    }
    
    > div > .Card:has(.${AppStyleCollections.Event.WRAPPER}) {
      > div::before, > div > div::before, .Sticky::before {
        border-top: none !important;
      }
      
      /* 回答事件-描述 */
      > div > div > a > div > div {
        color: var(${this.themeVarService.tieBar.default.text}) !important;
        
        + svg {
          fill: var(${this.themeVarService.tieBar.default.text}) !important;
        }
        
        &:hover {
          color: var(${this.themeVarService.link.default.text}) !important;
          
          + svg {
            fill: var(${this.themeVarService.link.default.text}) !important;
          }
        }
      }
    }
    
    #QuestionAnswers-answers {
      .Card {
        background: transparent !important;
        box-shadow: unset !important;
        
        &.ViewAll {
          color: var(${this.themeVarService.tieBar.default.text}) !important;
          
          &:hover {
            color: var(${this.themeVarService.link.default.text}) !important;
          }
          
          &::before {
            ${this.stylesService.inlinePseudo.icon({ backgroundImageId: ICON_IDS.action.view })}
          }
        }
        
        .List-header {
          border-bottom: none !important;
          
          .List-headerText {
            span {
              color: var(${this.themeVarService.tieBar.default.text}) !important;
            }
          }
        }

        /* 回答元数据 */
        .ContentItem-meta {
          .AnswerItem-authorInfo {
            display: flex !important;
            align-items: center;
            /* 回答者名称 */
            .AuthorInfo-content .AuthorInfo-name a {
              color: var(${this.themeVarService.tieBar.default.textPrimary}) !important;
            }
            /* 回答者简介 */
            .AuthorInfo-content .AuthorInfo-badgeText {
              color: var(${this.themeVarService.tieBar.default.text}) !important;
            }
          }
        }
        
        /* 回答内容 */
        .RichContent {
          .RichContent-inner {
            padding: 4px 8px !important; /* 回答内容内边距 */
            max-height: 200px; /* 回答内容最大高度 */
            overflow: auto !important; /* 回答内容超出高度时滚动 */
            
            #content {
              p {
                color: var(${this.themeVarService.tieBar.default.text}) !important;
                
                a {
                  color: var(${this.themeVarService.link.default.text}) !important;
                  
                  &:hover {
                    color: var(${this.themeVarService.link.default.textHover}) !important;
                  }
                }
              }
            }
          }
        }
        
        /* 回答操作按钮 */
        .ContentItem-actions {
          background-color: transparent !important;
          padding: 10px 0 !important;
          margin: unset !important;
        }
      }
    }
    
    /* 写回答 */
    .QuestionAnswers-answerButton {
      &:hover {
        background-color: transparent !important;
        color: var(${this.themeVarService.link.default.textHover}) !important;
      }
    }
    
    .CollapsedAnswers-bar {
      border-top: none !important;
      border-bottom: none !important;
      
      button, a {
        color: var(${this.themeVarService.tieBar.default.text}) !important;
        
        &:hover {
          color: var(${this.themeVarService.link.default.text}) !important;
        }
      }
    }
  }
}

/* 回答消息样式 */
${this.getMessageStyles(theme)}

/* 回答列表样式 */
${this.answerListManager?.styles() || ''}
    `
  }
}
